* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.flex {
  display: flex;
}

.column {
  flex-direction: column;
}
.row {
  flex-direction: row;
}

.flex-sb {
  justify-content: space-between;
}
.flex-sa {
  justify-content: space-around;
}

.flex-jc {
  justify-content: center;
}

.flex-je {
  justify-content: end;
}
.flex-js {
  justify-content: start;
}

.flex-ae {
  align-items: end;
}

.flex-as {
  align-items: start;
}

.flex-ac {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}
.flex-shrink0 {
  flex-shrink: 0;
}
.flex-content-c {
  align-content: center;
}
.flex-content-sa {
  align-content: space-around;
}

.flex-content-sb {
  align-content: space-between;
}
.flex-content-start {
  align-content: flex-start;
}
@for $i from 0 through 550 {
  .mt-#{$i} {
    margin-top: #{$i}rem;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}rem;
  }
  .ml-#{$i} {
    margin-left: #{$i}rem;
  }
  .mr-#{$i} {
    margin-right: #{$i}rem;
  }
  .fs-#{$i} {
    font-size: #{$i}rem;
  }
  .pt-#{$i} {
    padding-top: #{$i}rem;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}rem;
  }
  .pl-#{$i} {
    padding-left: #{$i}rem;
  }
  .pr-#{$i} {
    padding-right: #{$i}rem;
  }
  .px-#{$i} {
    padding-left: #{$i * 0.5}rem;
    padding-right: #{$i * 0.5}rem;
  }
  .py-#{$i} {
    padding-top: #{$i * 0.5}rem;
    padding-bottom: #{$i * 0.5}rem;
  }
  .mx-#{$i} {
    margin-left: #{$i * 0.5}rem;
    margin-right: #{$i * 0.5}rem;
  }
  .my-#{$i} {
    margin-top: #{$i * 0.5}rem;
    margin-bottom: #{$i * 0.5}rem;
  }
  .lh-#{$i} {
    line-height: #{$i}rem;
  }
  .height-#{$i} {
    height: #{$i}rem;
  }
  .height-#{$i}vh {
    height: #{$i}vh;
  }
  .width-#{$i} {
    width: #{$i}rem;
  }
  .radius-#{$i} {
    border-radius: #{$i}rem;
  }
  .p-#{$i} {
    padding: #{$i}rem;
  }
    .m-#{$i} {
    margin: #{$i}rem;
  }
  .ls-#{$i} {
    letter-spacing: #{$i}rem;
  }
  .flex-#{$i} {
    flex: #{$i};
  }
  .bottom-#{$i} {
    bottom: #{$i}rem;
  }
  .top-#{$i} {
    top: #{$i}rem;
  }
  .right-#{$i} {
    right: #{$i}rem;
  }
  .left-#{$i} {
    left: #{$i}rem;
  }
}

@for $i from 0 through 100 {
  .mt-#{$i}-per {
    margin-top: #{$i * 1%};
  }
  .mb-#{$i}-per {
    margin-bottom: #{$i * 1%};
  }
  .ml-#{$i}-per {
    margin-left: #{$i * 1%};
  }
  .mr-#{$i}-per {
    margin-right: #{$i * 1%};
  }
  .fs-#{$i}-per {
    font-size: #{$i * 1%};
  }
  .pt-#{$i}-per {
    padding-top: #{$i * 1%};
  }
  .pb-#{$i}-per {
    padding-bottom: #{$i * 1%};
  }
  .pl-#{$i}-per {
    padding-left: #{$i * 1%};
  }
  .pr-#{$i}-per {
    padding-right: #{$i * 1%};
  }
  .px-#{$i}-per {
    padding-left: #{$i * 0.5%};
    padding-right: #{$i * 0.5%};
  }
  .py-#{$i}-per {
    padding-top: #{$i * 0.5%};
    padding-bottom: #{$i * 0.5%};
  }
  .mx-#{$i}-per {
    margin-left: #{$i * 0.5%};
    margin-right: #{$i * 0.5%};
  }
  .my-#{$i}-per {
    margin-top: #{$i * 0.5%};
    margin-bottom: #{$i * 0.5%};
  }
  .lh-#{$i}-per {
    line-height: #{$i * 1%};
  }
  .height-#{$i}-per {
    height: #{$i * 1%};
  }
  .width-#{$i}-per {
    width: #{$i * 1%};
  }
  .radius-#{$i}-per {
    border-radius: #{$i * 1%};
  }
  .p-#{$i}-per {
    padding: #{$i * 1%};
  }
  .ls-#{$i}-per {
    letter-spacing: #{$i * 1%};
  }
  .bottom-#{$i}-per {
    bottom: #{$i * 1%};
  }
  .top-#{$i}-per {
    top: #{$i * 1%};
  }
  .right-#{$i}-per {
    right: #{$i * 1%};
  }
  .left-#{$i}-per {
    left: #{$i * 1%};
  }
}
.w100 {
  width: 100%;
}
.w50 {
  width: 50%;
}
.h100 {
  height: 100%;
}
.h50 {
  height: 50%;
}
.point {
  cursor: pointer;
}
.no-drop {
  cursor: no-drop;
}
.point-event-none {
  pointer-events: none;
}
.user-select-none {
  user-select: none;
}
.hover {
  user-select: none;
  &:hover {
    opacity: 0.8;
  }
  &:active {
    opacity: 0.95;
  }
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.y-scroll {
  overflow-y: scroll;
}
.x-scroll {
  overflow-x: scroll;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}

.single-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-r {
  position: relative;
}
.pos-a {
  position: absolute;
}
@for $i from 0 through 5 {
  @for $j from 0 through 9 {
    $scale-value: $i + $j * 0.1;
    .scale-#{$i}_#{$j} {
      transform: scale(#{$scale-value});
    }
    .lh-#{$i}_#{$j} {
      line-height: #{$scale-value};
    }
  }
}

.fr {
  float: right;
}
.fl {
  float: left;
}

.object-fit-cover {
  object-fit: cover;
}
.object-fit-contain {
  object-fit: contain;
}

.bold {
  font-weight: bold;
}

.inline-block {
  display: inline-block;
}
.white {
  color: white;
}

.gray {
  color: rgba(155, 164, 187, 1);
}

.flash {
  color: rgba(242, 246, 255, 1);
}

.blue {
  color: #F2F6FF;
text-stroke: 1px #1184F7;
  -webkit-text-stroke: 1px #1184F7;
}
.red {
  color:rgba(251, 75, 0, 1)
}

.orange {
  color: rgba(255, 134, 70, 1);
}

.skyblue {
  color: rgba(0, 156, 255, 1);
}
.white-half {
  color: rgba(255, 255, 255, 0.5);
}

.blue2 {
  color: rgba(27, 236, 252, 1);
}
